<script setup lang="ts">
import { ref } from "vue";
import { Router } from "@/utils/router";
import { Account } from "@/utils/account";

import FormCheckbox from "@/components/form/checkbox.vue";
import ServiceContact from "@/components/service/contact.vue";
import FormButton from "@/components/form/button.vue";
import PopupCenter from "@/components/popup/center.vue";

const typeId = ref(1);
const typeList = [
  { id: 1, name: "持证导游" },
  { id: 2, name: "非·持证导游" },
  { id: 3, name: "海外导游" },
  { id: 4, name: "考生（备考导游证）" },
];

const btnClick = () => {
  Account.checkLogin((isLogin) => {
    Router.navigateToOrRedirectTo(
      isLogin,
      `/package/guider/pages/apply/edit?type=${typeId.value}`
    );
  });
};

const questionVisible = ref(false);
</script>

<template>
  <view class="type-title">
    请选择您需要认证的身份类型
    <image
      class="type-title-icon"
      src="@/package/guider/static/apply-type-question.png"
      @click="questionVisible = true"
    />
  </view>

  <view class="type-data">
    <view
      class="type-data-item"
      :class="{ 'type-data-active': typeId === i.id }"
      v-for="i of typeList"
      :key="i.id"
      @click="typeId = i.id"
    >
      <view class="type-data-checkbox">
        <FormCheckbox :modelValue="typeId === i.id" />
      </view>
      <view class="type-data-text">{{ i.name }}</view>
    </view>
  </view>

  <view class="type-tip">
    如果您对身份认证有任何疑问，请联系
    <view class="type-tip-btn">在线客服<ServiceContact /></view>
  </view>

  <view class="type-btn">
    <view @click="btnClick">
      <FormButton>下一步</FormButton>
    </view>
  </view>

  <PopupCenter
    :modelValue="questionVisible"
    :showClose="false"
    translateY="-55%"
  >
    <view class="type-question">
      <view class="type-question-title">身份类型介绍</view>
      <view class="type-question-item">
        <view class="type-question-label">持证导游：</view>
        <view class="type-question-content">
          特指持有国家文旅部颁发的导游证的职业导游
        </view>
        <view class="type-question-desc">
          包括：中文导游、外文导游、研学导师、出镜领队等身份
        </view>
      </view>
      <view class="type-question-item">
        <view class="type-question-label">非·持证导游：</view>
        <view class="type-question-content">
          特指未取得导游证的文旅行业相关从业人员
        </view>
        <view class="type-question-desc">
          如：博物馆志愿者、文博讲师、讲解员、相关文博历史专家等
        </view>
      </view>
      <view class="type-question-item">
        <view class="type-question-label">海外导游：</view>
        <view class="type-question-content">
          身份为常住海外且取得相关职业资格证明的专业导游
        </view>
      </view>
      <view class="type-question-item">
        <view class="type-question-label">备考考生：</view>
        <view class="type-question-content">
          身份为拟报考导游资格证考试的考生
        </view>
      </view>
      <view class="type-question-btn" @click="questionVisible = false">
        我知道了
      </view>
    </view>
  </PopupCenter>
</template>

<style lang="scss">
page {
  padding-top: 60rpx;
  background-color: #ffffff;
}

.type-title {
  display: flex;
  align-items: center;
  height: 50rpx;
  padding-left: 40rpx;
  margin-bottom: 80rpx;
  font-size: 36rpx;
  color: #333333;
  line-height: 50rpx;
  font-weight: bold;

  .type-title-icon {
    width: 36rpx;
    height: 36rpx;
    margin-left: 20rpx;
  }
}

.type-data {
  .type-data-item {
    display: flex;
    align-items: center;
    height: 140rpx;
    padding-left: 40rpx;
    margin: 0 30rpx 40rpx;
    border: 2rpx solid #f5f7f9;
    border-radius: 20rpx;
    background-color: #f5f7f9;
    box-sizing: border-box;
  }

  .type-data-active {
    border-color: #ff7900;
    background-color: rgba(255, 121, 0, 0.08);
  }

  .type-data-checkbox {
    flex-shrink: 0;
  }

  .type-data-text {
    min-width: 0;
    margin-left: 40rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 36rpx;
    font-weight: bold;
  }
}

.type-tip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(160rpx + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40rpx;
  font-size: 28rpx;
  color: #999999;
  line-height: 40rpx;

  .type-tip-btn {
    position: relative;
    color: #ff7900;
    text-decoration: underline;
  }
}

.type-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106rpx;
  padding: 14rpx 60rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}

.type-question {
  position: relative;
  width: 74vw;
  padding: 80rpx 40rpx 60rpx;
  box-sizing: border-box;

  .type-question-title {
    margin-bottom: 40rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    text-align: center;
    font-weight: bold;
  }

  .type-question-item {
    margin-bottom: 30rpx;
  }

  .type-question-label {
    margin-bottom: 6rpx;
    font-size: 28rpx;
    color: #ff7900;
    line-height: 44rpx;
    font-weight: bold;
  }

  .type-question-content {
    font-size: 28rpx;
    color: #333333;
    line-height: 44rpx;
  }

  .type-question-desc {
    margin-top: 6rpx;
    font-size: 26rpx;
    color: #999999;
    line-height: 36rpx;
  }

  .type-question-btn {
    width: 300rpx;
    margin: 40rpx auto 0;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 76rpx;
    text-align: center;
    font-weight: bold;
    border-radius: 44rpx;
    background-color: #ff7900;
  }
}
</style>